<template>
  <div class="app-container">
    <!-- 条件选择栏 -->
    <el-card>
      <div slot="header">
        选择要排课的学年和学期
      </div>
      <div>
        <el-form inline>
          <el-form-item label="开课学年">
            <el-date-picker v-model="teachYear" type="year" value-format="yyyy" format="yyyy" @change="doQueryChange" />
          </el-form-item>
          <el-form-item label="开课学期">
            <el-select v-model="teachTerm" @change="doQueryChange">
              <el-option label="第一学期" :value="1" />
              <el-option label="第二学期" :value="2" />
              <el-option label="第三学期" :value="3" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <!-- 操作栏 -->
    <el-card v-if="hasData" style="margin-top: 20px;">
      <div>
        <el-button type="primary" @click="doAutoCs">一键排课</el-button>
        <el-button type="warning" @click="openAdjustCs">手动调整开课</el-button>
      </div>
    </el-card>
    <!-- 数据栏 -->
    <el-card style="margin-top: 20px;">
      <PaginatedTable
        :page-colums="pageColums"
        :page-data="{ pageInfo, list } "
        :selection-change-handler="selectionChangeHandler"
      />
    </el-card>
    <!-- 对话框 -->
    <el-dialog center width="30%" title="调整开课" :before-close="cancelAdjustCs" :visible.sync="adjustCsShow">
      <el-form>
        <el-form-item label="教学时段">
          <el-cascader
            v-model="csAdjustFormData.newTeachTimeId"
            :props="{emitPath:false}"
            :options="dropDownData.teachTime"
          />
        </el-form-item>
        <el-form-item label="上课教室">
          <el-cascader
            v-model="csAdjustFormData.newClassroomId"
            :props="{emitPath:false}"
            :options="dropDownData.classroom"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="cancelAdjustCs">取消</el-button>
          <el-button type="primary" @click="confimAdjustCs">调整</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>

import { getPage } from '@/api/ms/course/course/courseSchedule'
import PaginatedTable from '@/components/PaginatedTable'
import { adjustCs, executeAutoCs } from '@/api/ms/course/schedule/autoCs'
import { getClassroomDropDownGpByTypeGpByTeachBuilding, getTeachTimeDropDownGroupByWeek } from '@/api/ms/dropdown'

export default {
  name: 'CourseScheduleAuto',
  components: {
    PaginatedTable
  },
  data() {
    return {
      teachYear: null,
      teachTerm: null,
      pageColums: [
        { label: '教学班名称', propName: 'teachClassName' },
        { label: '所属课程名称', propName: 'courseName' },
        { label: '开课学年', propName: 'teachYear' },
        { label: '开课学期', propName: 'teachTerm' },
        { label: '教学时段', propName: 'teachTimeName' },
        { label: '上课教室', propName: 'classroomName' },
        { label: '授课教师', propName: 'teacherName' },
        { label: '预计上课人数', propName: 'expectedPeopleNum' }
      ],
      pageInfo: {
        pageNum: 1, // 当前页
        pageSize: 10, // 每页行数
        total: 0 // 列表总行数
      },
      list: [], // 数据列表
      ignoreRefresh: false,
      ids: [], // 选中的id列表
      rows: [], // 选择的数据列表
      adjustCsShow: false,
      dropDownData: {
        classroom: [],
        teachTime: []
      },
      csAdjustFormData: {
        id: null,
        newTeachTimeId: null,
        newClassroomId: null,
        oldTeachTimeId: null,
        oldClassroomId: null
      }
    }
  },
  computed: {
    pageParam() {
      return { teachYear: this.teachYear, teachTerm: this.teachTerm, pageInfo: this.pageInfo }
    },
    autoCsParam() {
      return { teachYear: this.teachYear, teachTerm: this.teachTerm }
    },
    hasData() {
      return this.list && this.list.length > 0
    }
  },
  watch: {
    pageInfo: {
      handler(val) {
        if (this.ignoreRefresh) {
          // 需要忽略本次change
          this.ignoreRefresh = false
          return
        }
        // 向后台请求新的表格数据
        this.refreshPageList()
      },
      deep: true
    }
  },
  mounted() {
    // 刷新下拉数据
    this.getDropdownData()
  },
  methods: {
    // 刷新下拉数据
    getDropdownData() {
      getClassroomDropDownGpByTypeGpByTeachBuilding().then(({ data }) => {
        this.dropDownData.classroom = data
      }).catch(() => {})
      getTeachTimeDropDownGroupByWeek().then(({ data }) => {
        this.dropDownData.teachTime = data
      }).catch(() => {})
    },
    // 刷新开课基本信息列表数据
    refreshPageList() {
      getPage(this.pageParam).then(({ list, pageInfo }) => {
        this.ignoreRefresh = true
        this.list = list
        this.pageInfo = pageInfo
      })
    },
    selectionChangeHandler(rows) {
      this.ids = rows.map(i => i.id)
      this.rows = rows
    },
    doQueryChange() {
      if (this.teachTerm !== null && this.teachYear !== null) {
        this.ignoreRefresh = true
        this.pageInfo.pageNum = 1
        this.refreshPageList()
      }
    },
    doAutoCs() {
      const reqData = this.autoCsParam
      this.$confirm(`是否对${reqData.teachYear}学年第${reqData.teachTerm}学期的课程进行自动排课`, '自动排课确认').then(() => {
        executeAutoCs(this.autoCsParam).then(({ message }) => {
          this.$message.success(message)
        }).catch(() => {})
      })
    },
    openAdjustCs() {
      if (this.ids.length === 0) {
        this.$message.error('至少选择一项记录')
        return
      }
      if (this.ids.length > 1) {
        this.$message.error('只能选择一项记录')
        return
      }
      // 打开对话框
      this.csAdjustFormData.id = this.ids[0]
      this.csAdjustFormData.newTeachTimeId = this.rows[0].teachTimeId
      this.csAdjustFormData.newClassroomId = this.rows[0].classroomId
      this.csAdjustFormData.oldTeachTimeId = this.rows[0].teachTimeId
      this.csAdjustFormData.oldClassroomId = this.rows[0].classroomId
      this.adjustCsShow = true
    },
    cancelAdjustCs() {
      this.csAdjustFormData = {}
      this.adjustCsShow = false
    },
    confimAdjustCs() {
      if (this.csAdjustFormData.newClassroomId === this.csAdjustFormData.oldClassroomId &&
         this.csAdjustFormData.newTeachTimeId === this.csAdjustFormData.oldTeachTimeId) {
        this.$message.info('选择未改变，取消调整')
        this.cancelAdjustCs()
        return
      }

      const reqData = {
        id: this.csAdjustFormData.id,
        newTeachTimeId: this.csAdjustFormData.newTeachTimeId,
        newClassroomId: this.csAdjustFormData.newClassroomId
      }
      adjustCs(reqData).then(({ message }) => {
        this.$message.success(message)
        this.cancelAdjustCs()
        this.doQueryChange()
      })
    }

  }
}
</script>

<style>

</style>
